const canvas = document.getElementById('canvas1');
canvas.width = 500;
canvas.height = 800;
const ctx = canvas.getContext('2d');

class Game {
    constructor(ctx, width, height) {
        this.ctx = ctx;
        this.width = width;
        this.height = height;
        this.enemies = [];
        this.enemyTimer = 0;
        this.enemyInterval = 500;
        this.enemyTypes = ['worm', 'ghost','spider'];

    }
    update(deltatime) {
        this.enemies = this.enemies.filter(object => !object.markedForDeletion);
        if (this.enemyTimer > this.enemyInterval) {
            this.#addNewEnemy();
            this.enemyTimer = 0;
        } else {
            this.enemyTimer += deltatime;
        }
        this.enemies.forEach(object => object.update(deltatime))
    }
    draw() {
        this.enemies.forEach(object => object.draw(this.ctx))
    }
    #addNewEnemy() {
        const randomEnemyType = this.enemyTypes[Math.floor(Math.random() * this.enemyTypes.length)];
        if (randomEnemyType === 'worm') {
            this.enemies.push(new Worm(this))
        } else if (randomEnemyType === 'ghost') {
            this.enemies.push(new Ghost(this))
        }else if(randomEnemyType === 'spider'){
            this.enemies.push(new Spider(this))
        }
        // this.enemies.sort(function (a, b) {
        //     return a.y - b.y
        // })
    }
}

class Enemy {
    constructor(game) {
        this.game = game;
        this.markedForDeletion = false;
        this.frameX = 0;
        this.frameInterval = 200;
        this.frameTimer = 0;
        this.maxFrameX = 5;
    }
    update(deltatime) {
        this.x -= this.vx * deltatime;
        if (this.x < 0 - this.width) {
            this.markedForDeletion = true;
        }
        if(this.frameTimer>this.frameInterval){
            if(this.frameX<this.maxFrameX){
                this.frameX++;
            }else{
                this.frameX=0
            };
            this.frameTimer=0;
        }else{
            this.frameTimer+=deltatime
        }
    }
    draw(ctx) {
        ctx.drawImage(this.image,this.frameX*this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
    }
}

class Worm extends Enemy {
    constructor(game) {
        super(game)
        this.spriteWidth = 229;
        this.spriteHeight = 171;
        this.width = this.spriteWidth / 2;
        this.height = this.spriteHeight / 2;
        this.x = this.game.width;
        this.y = this.game.height - this.height;
        this.image = worm;
        this.vx = Math.random() * 0.1 + 0.2;
    }
}

class Ghost extends Enemy {
    constructor(game) {
        super(game)
        this.spriteWidth = 261;
        this.spriteHeight = 209;
        this.width = this.spriteWidth / 2;
        this.height = this.spriteHeight / 2;
        this.x = this.game.width;
        this.y = Math.random() *this.game.height*0.6;
        this.image = ghost;
        this.vx = Math.random() * 0.1 + 0.2;
        this.angle = Math.random()*2;
        this.curve = Math.random()*5;
        this.angleSpeed = Math.random()*0.2
    }
    update(deltatime){
        this.y += Math.sin(this.angle)*this.curve;
        this.angle += this.angleSpeed;
        super.update(deltatime);
    }
    draw(ctx){
        ctx.save();
        ctx.globalAlpha = 0.5;
        super.draw(ctx);
        ctx.restore();
    }
}


class Spider extends Enemy {
    constructor(game) {
        super(game)
        this.spriteWidth = 310;
        this.spriteHeight = 175;
        this.width = this.spriteWidth / 2;
        this.height = this.spriteHeight / 2;
        this.x = Math.random()*this.game.width;
        this.y = 0;
        this.image = spider;
        this.vx=0;
        this.vy = Math.random()*0.1+0.1;
        this.maxLength=Math.random()*200+100;
    }
    update(deltatime){
        super.update(deltatime);
        if(this.y<0-this.height*2){
            this.markedForDeletion = true;
        }        
        this.y += this.vy*deltatime;
        if(this.y>this.maxLength)this.vy *= -1;

    }
    draw(ctx){
        ctx.beginPath();
        ctx.moveTo(this.x+this.width/2,0);
        ctx.lineTo(this.x+this.width/2,this.y+10);
        ctx.stroke();
        super.draw(ctx)
    }
}

let lasttime = 1;
const game = new Game(ctx, canvas.width, canvas.height);
function animate(timestamp) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const deltatime = timestamp - lasttime;
    lasttime = timestamp;
    game.update(deltatime);
    game.draw();
    requestAnimationFrame(animate)
}

animate(0);